<template>
    <div class="big_box">
        <div class="musicTop">
            <div class="topleft">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-hanbaobao"></use>
                </svg>
                <span class="playAll">
                    播放全部
                    <span>(共{{ itemList.length }}首)</span>
                </span>
            </div>
            <div class="topright">
                <van-button round type="primary" color="#f00">+ 收藏(???)</van-button>
            </div>
        </div>

        <div class="music_List">
            <div class="music_detail" v-for="(item, index) in itemList" :key="index" @click="playMusic(index)">
                <div class="music_List_left">
                    <span class="songIndex">{{ index + 1 }}</span>
                    <div class="music_List_name">
                        <span class="songName">{{ item.name }}</span>
                        <div class="music_ar">
                            <span v-for="(ar, index) in item.ar" :key="index">{{ ar.name }}</span>
                        </div>
                    </div>
                </div>
                <div class="music_List_right">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hanbaobao"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    props: ['itemList'],
    methods:{ 
        ...mapMutations(['updataPlaylist','updataPlayListIndex']),
        playMusic(index){
            this.updataPlaylist(this.itemList)
            this.updataPlayListIndex(index)
        }
    }
    
}
</script>

<style lang="less" scoped>
.big_box {
    width: 100%;
    height: auto;
    background-color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    .musicTop {
        width: 100%;
        height: 60px;
        display: flex;
        padding: 10px;
        justify-content: space-between;
        align-items: center;

        .topleft {
            width: 50%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .playAll {
                font-weight: 999;

                span {
                    font-weight: 11;
                    font-size: .1rem;
                }
            }
        }
    }

    .music_List {
        width: 100%;

        .music_detail {
            // width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;

            .music_List_left {
                display: flex;
                .songIndex{ 
                    align-self: center;
                    padding: 5px;
                }
                .music_List_name {
                    display: flex;
                    flex-direction: column;
                    .songName{ 
                        font-weight: 600;
                    }
                    .music_ar{ 
                        display: flex;
                        span{ 
                            margin-right:5px;
                        }
                    }
                }
            }

        }
    }
}
</style>